<template>
  <div>
    <!-- table -->
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.zl')" :content="stat[0]" :bordered="true"/>
        </a-col>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.cz')" :content="stat[1]" :bordered="true"/>
        </a-col>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.rw')" :content="stat[2]" :bordered="true"/>
        </a-col>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.xjcz')" :content="stat[3]" :bordered="true"/>
        </a-col>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.xjrw')" :content="stat[4]" :bordered="true"/>
        </a-col>
        <a-col :sm="4" :xs="24">
          <head-info title="$t('incomeList.ze')" :content="stat[5]"/>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top: 24px">
      <div class="table-operator">
        <div style="margin-bottom:15px;">
          {{ $t('incomeList.lxsx') }}:
          <a-radio-group style="margin-right:10px;" @change="handleChangeType" defaultValue="-1">
            <a-radio-button value="-1">{{ $t('incomeList.qb') }}</a-radio-button>
            <a-radio-button value="buyer">{{ $t('incomeList.mj') }}</a-radio-button>
            <a-radio-button value="shop">{{ $t('incomeList.sj') }}</a-radio-button>
          </a-radio-group>
          {{ $t('incomeList.zssx') }}:
          <a-radio-group @change="handleChangeStatus" defaultValue="-1">
            <a-radio value="-1">{{ $t('incomeList.qb') }}</a-radio>
            <a-radio value="0">{{ $t('incomeList.zl') }}</a-radio>
            <a-radio value="1">{{ $t('incomeList.cz') }}</a-radio>
            <a-radio value="2">{{ $t('incomeList.rw') }}</a-radio>
            <a-radio value="3">{{ $t('incomeList.xjcz') }}</a-radio>
            <a-radio value="4">{{ $t('incomeList.xjrw') }}</a-radio>
          </a-radio-group>
        </div>
        <div>
          <a-range-picker @change="handleClickChangeDate" :style="{marginLeft:'10px',width: '256px'}" />
          <a-input-search style="margin-left:10px;width:280px;" placeholder="$t('incomeList.sssjh')" @search="onSearch" enterButton />
        </div>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="dataLoading"
        :rowSelection="{onChange: onSelectChange}"
      >
        <template slot="type" slot-scope="text">
          <template v-if="text==0">
            <template>{{ $t('incomeList.zl') }}</template>
          </template>
          <template v-else-if="text==1">
            <span style="color:blue">{{ $t('incomeList.cz') }}</span>
          </template>
          <template v-else-if="text==2">
            <span style="color:green">{{ $t('incomeList.rw') }}</span>
          </template>
          <template v-else-if="text==3">
            <span style="color:green">{{ $t('incomeList.xjcz') }}</span>
          </template>
          <template v-else-if="text==4">
            <span style="color:red">{{ $t('incomeList.xjrw') }}</span>
          </template>
          <template v-else>
            <span style="color:red">{{ $t('incomeList.qs') }}</span>
          </template>
        </template>
<!--        <template slot="text" slot-scope="text, record">-->
<!--          <template>-->
<!--            <span>{{text}}</span>-->
<!--          </template>-->
<!--        </template>-->
<!--        <template slot="operation" slot-scope="text, record">-->
<!--          <span>-->
<!--            <a-popconfirm title="$t('incomeList.sfysccx')" @confirm="handleClickDelete(record.id)">-->
<!--              <a-button type="danger" size="small">{{ $t('incomeList.sc') }}</a-button>-->
<!--            </a-popconfirm>-->
<!--          </span>-->
<!--        </template>-->
      </a-table>
      <div style="margin-top:15px;">
        <MyPage :curr="page.curr" :size="page.size" :all="page.total" @changePage="handleChangePage" @changePageSize="handleChangePageSize"/>
      </div>
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import { mixin, mixinDevice } from '@/utils/mixin'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import MyPage from './Page'

export default {
  name: 'AdvancedForm',
  mixins: [mixin, mixinDevice],
  components: {
    HeadInfo,
    MyPage
  },
  data () {
    return {
      description: this.$t('incomeList.bhtxdlsjl'),
      loading: false,
      dataLoading: false,
      curr_img_url: '',
      curr_img_show: false,
      stat: [
        0, 0, 0, 0, 0, 0
      ],
      // table
      columns: [
        {
          title: this.$t('incomeList.lx'),
          dataIndex: 'belong',
          key: 'belong',
          scopedSlots: { customRender: 'belong' }
        },
        {
          title: this.$t('incomeList.mc'),
          dataIndex: 'title',
          key: 'title'
        },
        {
          title: this.$t('incomeList.zh'),
          dataIndex: 'user.username',
          key: 'user.username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('incomeList.lyzh'),
          dataIndex: 'from_username',
          key: 'from_username'
        },
        {
          title: this.$t('incomeList.jq'),
          dataIndex: 'money',
          key: 'money'
        },
        {
          title: this.$t('incomeList.lb'),
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: this.$t('incomeList.sj'),
          dataIndex: 'created_at',
          key: 'created_at'
        },
        // {
        //   title: this.$t('incomeList.cz'),
        //   key: 'action',
        //   scopedSlots: { customRender: 'operation' }
        // }
      ],
      data: [],
      errors: [],
      readyCnt: 0,
      runningCnt: 0,
      stopCnt: 0,
      curr_type: -1,
      curr_status: -1,
      curr_token: '',
      map_str: '',
      selectedId: [],
      loadingConfirm: false,
      page: {
        curr: 1,
        size: 20,
        total: 0
      },
      searchUsername: '',
      date_str: ''
    }
  },
  created () {
    this.getList()
    this.curr_token = this.$ls.get(ACCESS_TOKEN)
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedId = []
      for (let i = 0; i < selectedRowKeys.length; i++) {
        this.selectedId.push(this.data[selectedRowKeys[i]].id)
      }
      console.log(this.selectedId)
    },
    getList () {
      let url = '/income/list?page=' + this.page.curr + '&size=' + this.page.size
      if (this.searchUsername) {
        url += '&username=' + this.searchUsername
      }
      let map_arr = []
      if (this.curr_type !== undefined && this.curr_type != -1) {
        map_arr.push('type=' + this.curr_type)
      }
      if (this.curr_status !== undefined && this.curr_status != -1) {
        map_arr.push('status=' + this.curr_status)
      }
      if (map_arr.length > 0) {
        url += '&' + map_arr.join('&')
      }
      if (this.date_str) {
        url += '&date_str=' + this.date_str
      }
      this.dataLoading = true
      this.$http.get(url).then(res => {
        this.data = res.list
        let status1 = 0
        let status2 = 0
        let status3 = 0
        let status4 = 0
        let status5 = 0
        this.data.forEach(item => {
          switch (item.type) {
            case 0:
              status1 += item.money
              break
            case 1:
              status2 += item.money
              break
            case 2:
              status3 += item.money
              break
            case 3:
              status4 += item.money
              break
            default:
              status5 += item.money
          }
        })
        this.stat = [status1.toFixed(2), status2.toFixed(2), status3.toFixed(2), status4.toFixed(2), status5.toFixed(2), res.sum]
        this.page.total = res.total
      }).catch(err => {
        this.$notification.error({
          message: this.$t('incomeList.sb'),
          description: err.message
        })
      }).then(() => {
        this.dataLoading = false
      })
    },
    handleClickDelete (id) {
      this.$http.post('/income/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        const newData = this.data.filter(item => item.id !== id)
        this.data = newData
      }).catch(err => {
        this.$notification.error({
          message: this.$t('incomeList.sb'),
          description: err.message
        })
      })
    },
    onSearch (val) {
      if (this.dataLoading) {
        return
      }
      this.searchUsername = val
      this.getList()
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleChangeType (e) {
      this.curr_type = e.target.value
      this.getList()
      this.map_str = '&type=' + this.curr_type
      if (this.curr_status != -2) {
        this.map_str += '&status=' + this.curr_status
      }
    },
    handleChangeStatus (e) {
      this.curr_status = e.target.value
      this.getList()
      this.map_str = '&status=' + this.curr_status
      if (this.curr_type != -1) {
        this.map_str += '&type=' + this.curr_type
      }
    },
    handleClickChangeDate (e, str) {
      this.date_str = str
      this.getList()
    },
    handleChangePageSize (size) {
      this.page.size = size
      this.getList()
    },
    handleChangePage (page) {
      this.page.curr = page
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>
